
<template>
  <view class="page-container">
    <!-- 登录状态 -->
    <view v-if="!isLogin" class="login-bar">
      <button class="login-btn" @click="gotoLogin">立即登录</button>
    </view>

    <!-- 功能入口 -->
    <uni-grid :column="4" :highlight="false">
      <uni-grid-item v-for="item in features" :key="item.text">
        <image :src="item.icon" class="grid-icon"/>
        <text class="grid-text">{{ item.text }}</text>
      </uni-grid-item>
    </uni-grid>

    <!-- 车牌绑定 -->
    <view class="card">
      <view class="card-title">
        <uni-icons type="car" size="20" color="#007AFF"/>
        <text>我的车辆</text>
      </view>
      <scroll-view scroll-y class="plate-list">
        <view v-for="(plate,index) in plates" :key="index" class="plate-item">
          <text>{{ plate }}</text>
          <uni-icons type="close" @click="unbind(index)"/>
        </view>
        <button class="add-btn" @click="showBindDialog">+ 添加车辆</button>
      </scroll-view>
    </view>

    <!-- 定位服务 -->
    <view class="location-card">
      <button class="location-btn" @click="getLocation">
        <uni-icons type="location" size="18" color="#fff"/>
        <text>获取周边停车指南</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      features: [
        { icon: '/static/icons/monthly.png', text: '月卡' },
        { icon: '/static/icons/charge.png', text: '充电桩' },
        { icon: '/static/icons/vip.png', text: '会员' },
        { icon: '/static/icons/invoice.png', text: '发票' }
      ],
      plates: []
    }
  },
  methods: {
    gotoLogin() {
      uni.navigateTo({ url: '/pages/mine/mine' })
    },
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          // TODO: 调用百度地图API
        }
      })
    }
  }
}
</script>

<style lang="scss">
.page-container {
  padding: 20rpx;
}

.login-bar {
  padding: 30rpx;
  .login-btn {
    background: #007AFF;
    color: #fff;
    border-radius: 50rpx;
  }
}

.grid-icon {
  width: 80rpx;
  height: 80rpx;
}

.location-card {
  margin-top: 30rpx;
  .location-btn {
    background: linear-gradient(90deg, #007AFF, #4CD964);
    color: #fff;
    border-radius: 50rpx;
  }
}
</style>






